<template>
  <el-row v-loading="loading">
    <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2" style="overflow: hidden;">
      <div style="padding: 10px;">
        <div style="padding: 10px;background: #fff;">
          <el-tree default-expand-all ref="treeRef"
            style="height: calc(100vh - 100px);overflow-y: auto;overflow-x: hidden;" node-key="id" highlight-current
            :current-node-key="currentKey" :data="equipTree" :expand-on-click-node="false"
            :props="{ label: 'name', value: 'id' }" @node-click="handleNodeClick" />
        </div>
      </div>
    </el-col>
    <el-col :xs="14" :sm="16" :md="18" :lg="20" :xl="22">
      <div style="padding: 10px 10px 10px 0px;">
        <div style="background: #fff;height: calc(100vh - 80px);overflow: auto;" >
          <A1 v-if="showView.equip && showView.equip.code.includes('A1')" :equip="showView.equip" />
          <A2 v-if="showView.equip && showView.equip.code.includes('A2')" :equip="showView.equip" />
          <errView v-else />
        </div>  
      </div>

    </el-col>
  </el-row>

</template>
<script lang="ts" setup>
import { ref, reactive,  onMounted } from 'vue'
import { equipApi } from '@/utils/api/equip';
import { siteApi } from '@/utils/api/site';
import { userApi } from '@/utils/api/admin';
import { projectApi } from '@/utils/api/project';
import { reasonApi } from '@/utils/api/reason';
import { ElTree } from 'element-plus'
// import formView from './create.vue'
import { ElMessage } from 'element-plus'
import A1 from './template/A1.vue'
import A2 from './template/A2.vue'

import errView from './template/err.vue'
import { Loading } from 'element-plus/es/components/loading/src/service.mjs';

interface Tree {
  label: string
  children?: Tree[]
}
const currentKey = ref(null)
const treeRef = ref(null)
const showView = reactive(
  {
    Loading:false,
    show: false,
    equip:{
      id: '',
      code: '',
      name: '',
      pid: '',
      type: '',
    }
  }
)
const handleNodeClick = (data: Tree) => {
  showView.Loading = true
  if (data.type === 1) {
    showView.show = true
    showView.equip = data
   
  } else {
    showView.show = false
    showView.equip = null
  }
  showView.Loading = true

}

const equipTree: Tree[] = reactive([])
const oldTree = reactive([])


const convertToTree = (data: any[]): Tree[] => {
  const tree = [];
  const map = {};

  // 第一步：创建一个以 id 为键的映射表
  data.forEach(item => {
    map[item.id] = { ...item,name:item.name+'-'+item.code ,children: [] };
  });

  // 第二步：找出所有可能的父节点 id
  const allParentIds = new Set(data.map(item => item.pid));

  // 第三步：构建树形结构
  data.forEach(item => {
    if (!map[item.pid]) {
      // 如果该元素的 pid 不在 map 中，说明它没有父级，是根节点
      tree.push(map[item.id]);
    } else {
      // 否则，找到其父节点并将其添加到父节点的 children 数组中
      const parent = map[item.pid];
      if (parent) {
        parent.children.push(map[item.id]);
      }
    }
  });

  return tree;
}
const loading = ref(false)
const getResAll = async() => {
  loading.value = true
try {
  const res = await Promise.all([
      userApi.getAll({type:[1,2,3]}),
      equipApi.getAll({}),
      siteApi.getAll({}),
      projectApi.getAll({}),
      reasonApi.getAll({})
  ]);
  localStorage.setItem('userList', JSON.stringify(res[0].data))
  localStorage.setItem('equipList', JSON.stringify(res[1].data))
  localStorage.setItem('siteList', JSON.stringify(res[2].data))
  localStorage.setItem('projectList', JSON.stringify(res[3].data))
  localStorage.setItem('reasonList', JSON.stringify(res[4].data))


  Object.assign(equipTree, convertToTree(res[1].data))
  loading.value = false

}catch(err){
  loading.value = false
  console.log('失败',err)
}

}

onMounted(async () => {
  getResAll()
})


</script>

<style scoped>
.demo-form-inline {
  padding-bottom: 0;
}

.content {
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  /* 第一列宽度随内容变化，第二列宽度自动填充 */

}

.leftequip {}

.rigthUser {
  width: 100%;
}
</style>
<style>
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {

  /* background-color:#409eff ;  */
  background: none !important;
  color: #409eff;
}
</style>
